<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>渐变</title>
    <style>
        #grad1{
            height: 150px;
            width: 200px;
            background: -webkit-radial-gradient(circle,red,yellow,green);/* Safari 5.1 - 6.0 */
            background: -o-radial-gradient(circle,red,yellow,green);/* Opera 11.6 - 12.0 */
            background: -moz-radial-gradient(circle,red,yellow,green);/* Firefox 3.6 - 15 */
            background: radial-gradient(circle,red,yellow,green);/* 标准的语法（必须放在最后） */
        }
        #grad2{
            height: 200px;
            background: -webkit-linear-gradient(left, red , blue); /* Safari 5.1 - 6.0 */
            background: -o-linear-gradient(right, red, blue); /* Opera 11.1 - 12.0 */
            background: -moz-linear-gradient(right, red, blue); /* Firefox 3.6 - 15 */
            background: linear-gradient(to right, red , blue); /* 标准的语法（必须放在最后） */

            margin-top: 20px;
        }
    </style>
</head>
<body>
<div id="grad1"></div>
<div id="grad2"></div>
</body>
</html>